<template>
	<view>
		<view class="cates">
			<!-- <search-Input></search-Input> -->
			<view class="cates_contianer">
				<!--左侧菜单-->
				<scroll-view scroll-y class="left_menu">
				<view 
				v-for="(item,index) in leftMenuList"
				:key="index"
				:class="['menu_item',index===currentIndex?'active':'']"
				
				@click="handleItemTap"
				:data-index="index">
				{{item}} 
				</view>
				</scroll-view>
				<!--右侧商品内容-->
				<scroll-view :scroll-top="scrollTop" @scroll="scroll" scroll-y class="right_content">
				<view class="goods_group"
				v-for="(item,index) in rightContent"
				:key="index">
					<view class="goods_title">
						<text class="dilimiter">/</text>
						<text class="title">{{item.cat_name}}</text>
						<text class="dilimiter">/</text>    
					</view>
					<view class="goods_list">
						<navigator
						v-for="item in item.children"
						:key="item.cat_id"
						:url="`/pages/goods_list?cid={{item.cat_id}}`"
						>
						<image mode="widthFix" :src="item.cat_icon"></image>
						<view class="goods_name">{{item.cat_name}}</view>
						</navigator>
					</view>
				</view>
				</scroll-view>
			</view>
		</view>

	</view>
</template>

<script>
import searchInput from "@/components/searchInput"
	export default {
		components:{
            searchInput
        },
		data(){
			return{

				//左侧菜单数据
				leftMenuList:[],
				//右侧商品内容数据
				rightContent:[],
				//被点击左侧菜单
				currentIndex:0,
				//右侧内容滚动条距离顶部的距离
				scrollTop:0,
				old: {
					scrollTop: 0
				},
				Cates:[],
			}


    	},
		mounted() {
			// uni.setNavigationBarTitle({title:'商品分类'})
			
        	//获取本地存储中的数据
			const Cates = uni.getStorageSync("cates");
			if(!Cates){
				//不存在，发送请求获取数据
				this.getCates();
			}else{
				//存在旧数据，判断是否过期
				if(Date.now()-Cates.time>1000*10){
					//过期就发送请求获取数据
					this.getCates();
				}else{
					//不过期就可以使用旧数据
					this.Cates = Cates.data;
					//构造左侧大菜单数据
					this.leftMenuList = this.Cates.map(v=>v.cat_name);
					//构造右侧商品数据
					this.rightContent = this.Cates[0].children;
				
				}
        	}

    	},
		
		methods:{
			    //获取分类数据
			getCates(){
				this.request({
					url:"https://api-hmugo-web.itheima.net/api/public/v1/categories"
				})
				.then(res=>{
					this.Cates = res;

					//把接口的数据存入本地存储
					uni.setStorageSync('cates', {time:Date.now(),data:this.Cates});

					//构造左侧大菜单数据
					this.leftMenuList = this.Cates.map(v=>v.cat_name);
					//构造右侧商品数据
					this.rightContent = this.Cates[0].children;
					
				})
			
    		},

			//props单向数据流原因
			scroll(e){
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			
			goTop(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
        	},
			//左侧点击事件
			handleItemTap(e){
				const {index} = e.currentTarget.dataset;
				this.rightContent = this.Cates[index].children;

				this.currentIndex = index;
				//重新设置右侧内容scroll-view标签距离顶部的距离
				this.goTop();
				
				
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.cates{
		height: 100%;
		.cates_contianer{
			height: calc(100vh - 90rpx);
			display: flex;
			.left_menu{
				.menu_item{
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 30rpx;
				}
				.active{
					color: var(--themeColor);
					border-left: 5rpx solid currentColor;
				}
				flex: 2; 
			
			}
			.right_content{ 
				flex: 5;
				.goods_group{
					.goods_title{
						height: 80rpx;
						display: flex;
						justify-content: center;
						align-items: center;

					}
					.goods_list{ 
						display: flex;
						flex-wrap: wrap; 
						navigator{
							width: 33.33%;
							text-align: center;
							image{
								width: 50%;
							}
							.goods_name{ 
	
							}
						}
					}
				}   
			}  
		}
	}
</style>